<template>
  <div class="page flex-col" ref="page">
    <video-bg/>
    <img src="~@/assets/shouye/footer.png" class="footer">
    <img src="~@/assets/shouye/footer2.png" class="footer2">
    <div class="group1 flex-col">
      <div class="group2 flex-row">
        <div class="layer1 flex-col">
          <div class="layer2 flex-col">
            <div class="kb-title">
              <span class="title-word">人才橱窗</span>
              <span class="title-word-en">Talent&nbsp;Shoecase</span>
            </div>
            <left1/>
            <div class="kb-title" style="margin-top:20px">
              <span class="title-word">作品应用</span>
              <span class="title-word-en">Works&nbsp;Applicatior</span>
            </div>
            <left2/>
          </div>
        </div>
        <div class="layer13 flex-col justify-between">
          <top/>
          <center/>
        </div>
      </div>

      <div class="group8 flex-col">
        <div class="block4 flex-col">
          <right/>
          <tag-cloud/>
          <effect/>
          <l-table/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import right from './modules/right'
import TagCloud from './modules/tag-cloud'
import effect from './modules/effect'
import LTable from './modules/l-table'
import top from './modules/top'
import center from './modules/center'
import left1 from './modules/left1'
import left2 from './modules/left2'
import videoBg from './modules/video-bg'
export default {
  components:{
    right, effect, LTable, TagCloud,
    top, center, left1, left2,
    videoBg
  },
  data() {
    return {
      constants: {

      }
    };
  },
  created() {
    window.addEventListener('resize', this.onresize, false);
  },
  mounted(){
    this.onresize()
  },
  methods: {
    onresize(){
      let cliWidth = document.documentElement.clientWidth || document.body.clientWidth
      let cliHeight = document.documentElement.clientHeight || document.body.clientHeight
      let contW = 1920
      let contH = 1080
      let w = cliWidth / contW
      let h = cliHeight / contH
      let size = cliWidth / cliHeight
      let scale = contW / contH
      // if(size > scale){
      //   this.$refs.page.style.transform = 'scale(' + h +')'
      // } else {
        this.$refs.page.style.transform = 'scale(' + w +')'
      //}
    }
  }
};
</script>
<style lang="less" src="./assets/index.less" />
